<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        body{
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: #001432;
            background-image: url("images/背景图1.png");
            background-size: 100% 100%;
        }
        .warp-box {
            height: 100%;
        }
        .row {
            margin: 0 !important;
            padding: 0 !important;
        }
        .col-flex-height {
            flex: 1;
            display: flex;
            background-image: url("images/panel-l-t.png");
            background-size: 100% 100%;
            margin: 14px 18px;
        }
        .col-lg-3,.col-lg-4,.col-lg-6 {
            padding: 0 !important;
            margin: 0 !important;
        }
    </style>
</head>
<body>
    <div class="" style="height: 100%;display: flex;flex-direction: column;background-image: url('./images/wrapper-bg.png');background-size: 100% 100%;">
        <div style="flex: 1;display: flex;justify-content: center;align-items: center;margin-top: -12px;">
          <span style="color: #83cadf;font-weight: bold;font-size: 14px;flex: 9;text-align: center;margin-right: -176px;">东软空气质量环保公众监督平台</span>
          <span style="color: #83cadf;flex: 1;" id="now-time"></span>
        </div>
        <div style="display: flex;flex: 15">
          <div style="flex: 3;display: flex;flex-direction: column;">
            <div id="left-top" class="col-flex-height">
              <div id="left-top-left" style="flex: 1;">
                
              </div>
              <div id="left-top-right" style="flex: 1;">
                
              </div>
            </div>
            <div id="left-mid" class="col-flex-height"></div>
            <div id="left-btm" class="col-flex-height"></div>
          </div>
          <div style="flex: 4;display: flex;flex-direction: column;">
            <div id="mid-map" style="flex: 3;"></div>
            <div id="mid-btm" style="flex: 1;display: flex;flex-direction: column;background-image: url('images/panel-l-t.png');background-size: 100% 100%;margin: 14px 18px;">
              <div style="flex: 1;text-align: center;color: #fff;margin-top: 20px;">空气质量检测实时统计</div>
              <div style="display: flex;flex: 9;">
                <div style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;">
                  <div id="mid-btm-1" style="color: #fff;font-size: 24px;font-weight: bold;">38</div>
                  <div style="color: #fff;font-size: 14px;">空气质量检测总数量</div>
                </div>
                <div style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;">
                  <div id="mid-btm-2" style="color: #fff;font-size: 24px;font-weight: bold;">38</div>
                  <div style="color: #fff;font-size: 14px;">空气质量良好数量</div>
                </div>
                <div style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;">
                  <div id="mid-btm-3" style="color: #fff;font-size: 24px;font-weight: bold;">38</div>
                  <div style="color: #fff;font-size: 14px;">空气质量污染数量</div>
                </div>
              </div>
            </div>
          </div>
          <div style="flex: 3;display: flex;flex-direction: column;">
            <div id="right-top" class="col-flex-height"></div>
            <div id="right-mid" class="col-flex-height"></div>
            <div id="right-btm" class="col-flex-height"></div>
          </div>
        </div>
      </div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript">
  var baseUrl = "http://localhost:9090/"
  function pad(num) {
    return num.toString().padStart(2, "0");
  }

  function formatDateTime(date) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hour = date.getHours();
    const minute = date.getMinutes();
    const second = date.getSeconds();
    return `${year}-${pad(month)}-${pad(day)} ${pad(hour)}:${pad(minute)}:${pad(second)}`;
  }

  function formatDate(date) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hour = date.getHours();
    const minute = date.getMinutes();
    const second = date.getSeconds();
    return `${pad(month)}`;
  }

  $("#now-time").text(formatDateTime(new Date()))

  setInterval(() => {
    $("#now-time").text(formatDateTime(new Date()))
  }, 1000);

</script>
<script type="text/javascript" src="js/left-top.js"></script>
<script type="text/javascript" src="js/left-mid.js"></script>
<script type="text/javascript" src="js/left-btm.js"></script>
<script type="text/javascript" src="js/mid-map.js"></script>
<script type="text/javascript" src="js/right-top.js"></script>
<script type="text/javascript" src="js/mid-btm.js"></script>
</html>